<!-- 薪酬-基础设置 -->
<template>
  <ContentCard>
    <template #header>
      <pageHeaderNew
        :title="title"
        :breadCrumb="breadCrumb"
        :showBack="false"
      ></pageHeaderNew>
    </template>
    <a-tabs lazy-load default-active-key="1" v-model:active-key="currTab">
      <a-tab-pane key="1" title="薪资方案">
        <div class="base-setting-warp">
          <div v-for="(item, index) in setting[0]" :key="index">
            <settingWrap
              @goDetail="goDetail(item)"
              :name="item.name"
              :description="item.description"
              :icon="item.icon"
            ></settingWrap>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" title="薪酬设置">
        <div class="base-setting-warp">
          <div v-for="(item, index) in setting[1]" :key="index">
            <settingWrap
              @goDetail="goDetail(item)"
              :name="item.name"
              :description="item.description"
              :icon="item.icon"
            ></settingWrap>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" title="计薪规则">
        <div class="base-setting-warp">
          <div v-for="(item, index) in setting[2]" :key="index">
            <settingWrap
              @goDetail="goDetail(item)"
              :name="item.name"
              :description="item.description"
              :icon="item.icon"
            ></settingWrap>
          </div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </ContentCard>
</template>

<script lang="ts" setup>
import useExamineTabsStore from '@/store/modules/base/examineTabs/index';
interface str {
  name: string;
  description: string;
  icon: string;
  path: string;
}
const router = useRouter();
const title = '基础设置';

const breadCrumb: string[] = ['薪酬', '基础设置'];
const examineTabsStore = useExamineTabsStore();
const currTab = computed({
  get: () => examineTabsStore.tabsValue['salary'],
  set: (val: string) => {
    examineTabsStore.setTabs('salary', val);
  }
});
const setting = reactive<str[][]>([
  [
    {
      name: '薪资方案组',
      description: `说明：薪资方案组管理，即把人员分组，为每个组设置不同工资表模板、计薪方案等。`,
      icon: 'icon-settings',
      path: 'SalaryGroup'
    }
  ],
  [
    {
      name: '工资表模板',
      description: `说明：设置企业的工资表模板，即核算时的工资表。`,
      icon: 'icon-settings',
      path: 'SalaryTemplate'
    },
    {
      name: '最低工资',
      description: `说明：设置工资标准，每个城市同一时间段内，相同的类型仅可新增一个工资标准。`,
      icon: 'icon-settings',
      path: 'MinSalary'
    },
    {
      name: '企业设置',
      description: `说明：设置企业工资发放信息`,
      icon: 'icon-settings',
      path: 'EnterpriseSetting'
    }
  ],
  [
    {
      name: '考勤计薪规则',
      description: `说明：考勤计薪规则用于管理企业的旷工扣款、请假扣款、加班费规则。`,
      icon: 'icon-settings',
      path: 'CheckRules'
    },
    {
      name: '计税规则',
      description: `说明：计税规则，由系统统一提供。`,
      icon: 'icon-settings',
      path: 'TaxRules'
    },
    {
      name: '津补贴规则',
      description: `说明：津补贴方案，即对应“薪酬设置”内薪酬结构所启用的各个津补贴项目，设置企业每月津补贴的发放规则。`,
      icon: 'icon-settings',
      path: 'AllowanceRules'
    },
    {
      name: '绩效规则',
      description: `说明：绩效规则方案，设置员工每月的绩效工资、提成、奖金计算规则。`,
      icon: 'icon-settings',
      path: 'PerformanceRules'
    },
    {
      name: '计件工资',
      description: `说明：计件工资，设置员工每月的计件工资计薪规则。`,
      icon: 'icon-settings',
      path: 'PieceRules'
    },
    {
      name: '计时工资',
      description: `说明：计时工资，设置员工每月的计时工资计薪规则。`,
      icon: 'icon-settings',
      path: 'TimeRules'
    }
  ]
]);

const goDetail = (item: str) => {
  router.push({
    name: item.path
  });
};
</script>

<style scoped lang="less">
.base-setting {
  &-warp {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
  }
}
.arco-divider-horizontal {
  margin-top: 0;
}

::v-deep .arco-tabs-nav::before {
  height: 0px !important;
}
</style>
